<!-- eslint-disable vue/no-parsing-error -->
<template>
    <Card>
        <Row>
            <Col>
            <DatePicker type="date"  v-model="params.date_time" :options="options1" placeholder="请选择时间" style="width: 200px" @on-change="changeDate"></DatePicker>
            </Col>
            <Col class="ivu-ml-16">
            <Select v-model="params.project_id" v-width="200" placeholder="请选择项目" @on-change="changeProject">
                <Option v-for="item in projectList" :value="item.project_id" :key="item.project_id">{{ item.name }}</Option>
            </Select>
            </Col>
            <Col class="ivu-ml-16">
            <!-- <Button type="primary">选择文件</Button> -->
            <Upload :action="`${url}/v1/search/cixing/import-excel?auth_access_token=${auth_access_token}&auth_project_id=${auth_project_id}`" :data="datas" :before-upload="beforeUpload" :on-success="successUpload" :show-upload-list="false" v-hasC="{
                name: 'v1-search-cixing-import-excel',
                flag: 'v1/search/cixing/import-excel',
            }">
                <Button type="primary" icon="ios-cloud-upload-outline">选择文件</Button>
            </Upload>
            </Col>
        </Row>
     
        <div  class="ivu-mt-16">
            <template>
                <Upload
                    multiple
                    type="drag"
                    :action ="`${url}/v1/search/cixing/import-excel?auth_access_token=${auth_access_token}&auth_project_id=${auth_project_id}`" :data="datas" :before-upload="beforeUpload" :on-success="successUpload" :show-upload-list="false"  v-hasC="{
                        name: 'v1-search-cixing-import-excel',
                        flag: 'v1/search/cixing/import-excel',
                }">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color:#3399ff"></Icon>
                        <p>也可将文件拖入至此区域进行上传</p>
                    </div>
                </Upload>
            </template>
        </div> 
        <Row>
            <Col>
            <Button type="primary" class="ivu-mt-16" @click="exportData" :loading="loading">{{`${loading?'正在导出中':'导出'}`}}</Button> 
            </Col>
            <Col>
            <div class="ivu-ml-16" style="margin-top: 20px;color:#2d8cf0;">{{title}}</div>
            </Col>
        </Row> 
    </Card>
</template>
<script>
    import {excelExport} from '@/api/hqapi';
    import dayjs from 'dayjs';
    import util from '@/libs/util';
    export default {
        data(){
            return {
                url: '',
                params: {project_id: '',date_time: ''},
                projectList: [],
                datas: { project_id: '',date_time: '' },
                options1: {
                    disabledDate(date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                auth_project_id: '',
                auth_access_token: '',
                title: '',
                file_type: '',
                path: '',
                loading: false

            };
        },
        mounted(){
            this.url = process.env.VUE_APP_API;
            this.initial();
        },
        methods: {
            initial() {
                this.auth_project_id = JSON.parse(localStorage.getItem('currentProject'));
                this.auth_access_token = util.cookies.get('token');
                this.projectList = JSON.parse(localStorage.getItem('project'));
                // this.askData();
            },
            changeDate(){
                this.datas.date_time = dayjs(this.params.date_time).format('YYYY-MM-DD');
            },
            changeProject(){
                this.datas.project_id = this.params.project_id;
            },
            beforeUpload(file){
                console.log(file,'file');
                if(this.datas.date_time == '' || this.datas.project_id == ''){
                    this.$Message.error('请选择时间和项目');
                }
            },
            successUpload(res){
                console.log(res.data,'file_name');
                this.title = res.data.file_name;
                this.file_type = res.data.file_type;
                this.path = res.data.path;

            },
            exportData(){
                if(this.params.date_time == '' || this.params.project_id == ''){
                    this.$Message.error('请选择时间和项目');
                    return;
                }
                this.loading = true;
                const params = {
                    project_id: this.params.project_id,
                    date_time: dayjs(this.params.date_time).format('YYYY-MM-DD'),
                    file_type: this.file_type,
                    path: this.path
                };
                excelExport(params).then(res => {
                    this.loading = false;
                    this.createExecl(res, this.title);
                });
            },
            createExecl(res, fileName) {
                let applicationType = {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                };
                let blob = new Blob([res], applicationType);
                // 错误处理
                let _this = this;
                if(res.type !== applicationType.type) {
                    const fileReader = new FileReader();
                    fileReader.readAsText(blob, 'utf-8');
                    fileReader.onload = function() {
                        let msg = JSON.parse(fileReader.result);
                        _this.$Message.error({
                            content: msg.message,
                            duration: 3,
                        });
                    };
                    return;
                }
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                link.download = fileName; // 下载的文件名
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    };
</script>

<style>

</style>